<template>
    <el-tooltip placement="top" effect="light" :disabled="!showError" v-model="showTip" :manual="true">
        <div slot="content">{{message}}</div>
        <el-input v-model="currentValue" :placeholder="placeholder"
                  ref="input"
                  :maxlength="maxlength"
                  :minlength="minlength"
                  :value="value"
                  :rows="rows"
                  :disabled="disabled"
                  :size = "size"
                  :class="'commonInput commonInput-'+type+ ' ' + errorClass"
                  :clearable="clearable"
                  :readOnly="readOnly"
                  @blur="validateValue(currentValue)"
                  @focus="onFocus"
                  @input="onKeyUp"
                  v-bind="$attrs"
                v-on="$listeners"
                  :type="type">
            <i slot="suffix" style="float: right;" class="el-input__icon el-icon-warning-outline icon" @click="showErrorClick"></i>
        </el-input>
    </el-tooltip>
</template>
<script>
    export default {
        name: 'commonInput',
        currentValue: String,
        showError: Boolean,
        errorClass: String,
        showTip: Boolean,
        message: String,
        oldValue: String,
        forceInput: Boolean,

        data() {
            return {
                currentValue: this.value,
                showError: false,
                errorClass: '',
                showTip: false,
                message: '',
                forceInput:this.force
            };
        },

        watch: {
            value(val, oldValue) {
                this.oldValue = oldValue;
                this.setCurrentValue(val);
            },

            showError(val) {
                this.errorClass = val ? 'commonInputError' : '';
                if (this.size && this.size.toLowerCase() == 'small') {
                    this.errorClass = val ? 'commonInputError commonInputErrorSmall' : '';
                } else if (this.size && this.size.toLowerCase() == 'medium') {
                    this.errorClass = val ? 'commonInputError commonInputErrorMedium' : '';
                } else if (this.size && this.size.toLowerCase() == 'mini') {
                    this.errorClass = val ? 'commonInputError commonInputErrorMini' : '';
                }
            },
            errorMessage(val) {
                console.log(val)
                this.setMessage(val);
            }
        },

        created: function () {

        },

        methods: {

            showErrorClick() {
                this.showTip = !this.showTip
                console.log('showErrorClick' + this.showError)
            },

            onFocus() {
//                this.showError = false;
            },

            validateValue(value) {
                //var numReg = /^[0-9]+$/
                let me = this;
                let r;
                if (me.required && (value == null || value == '')) {
                    r = false;
                    me.setRuleMessage('必填项');
                } else if (value == null || value == '') {
                    r = true;
                } else if (me.rule) {
                    switch (me.rule) {
                        case 'required':
                            if (me.currentValue === '') {
                                r = false;
                                me.setRuleMessage('必填项');
                            } else {
                                r = true;
                            }
                            break;
                        case 'number':
                            var numReg = /^[0-9]+$/;
                            var numRe = new RegExp(numReg)
                            r = numRe.test(me.currentValue);
                            if (!r) {
                                me.setRuleMessage('请输入数字！');
                            }
                            break;
                        case 'float':
                            var numReg = /^(-?\d+)(\.\d+)?$/;
                            var numRe = new RegExp(numReg)
                            r = numRe.test(me.currentValue);
                            if (!r) {
                                me.setRuleMessage('请输入浮点数！');
                            }
                            break;
                        case 'password':
                            var numReg = /^[a-zA-Z0-9]\w{5,20}$/;
                            var numRe = new RegExp(numReg)
                            r = numRe.test(me.currentValue);
                            if (!r) {
                                me.setRuleMessage('请输入由以字母或数字开头，长度在6~20之间，只能包含字母、数字和下划线的字符串！');
                            }
                            break;
                        case 'mobile':
                            var numReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
                            var numRe = new RegExp(numReg)
                            r = numRe.test(me.currentValue);
                            if (!r) {
                                me.setRuleMessage('请输入正确的手机号！');
                            }
                            break;
                        case 'email':
                            var numReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                            var numRe = new RegExp(numReg)
                            r = numRe.test(me.currentValue);
                            if (!r) {
                                me.setRuleMessage('请输入正确的email！');
                            }
                            break;
                        case 'folder':
                            var numReg = /^\/(\w+\/?)+$/;
                            var numRe = new RegExp(numReg)
                            r = numRe.test(me.currentValue);
                            console.log(me.currentValue)
                            if (!r) {
                                me.setRuleMessage('请输入正确的文件路径！');
                            }
                            break;
                        case 'IDNumber':
                            var numReg = /^\d{15}|\d{18}$/;
                            var numRe = new RegExp(numReg)
                            r = numRe.test(me.currentValue);
                            if (!r) {
                                me.setRuleMessage('请输入正确的身份证号！');
                            }
                            break;
                        case 'ip':
                            var numReg = /\d+\.\d+\.\d+\.\d+/;
                            var numRe = new RegExp(numReg)
                            r = numRe.test(me.currentValue);
                            if (!r) {
                                me.setRuleMessage('请输入正确的IP！');
                            }
                            break;
                        default:
                            r = true;
                            break;
                    }
                } else if (me.ruleReg) {
                    var numReg = eval(me.ruleReg);
                    var numRe = new RegExp(numReg)
                    r = numRe.test(me.currentValue);
                    if (!r) {
                        me.setRuleMessage('输入格式不正确！');
                    }
                } else if (me.validate){
                    r = me.validate(value);
                } else {
                    r = true;
                }
                if (!me.forceInput) {
                    me.showError = !r;
                }
                return r;
            },

            onKeyUp() {
                const me = this;
                if (this.currentValue == '') {
                    setTimeout(function () {
                        me.setCurrentValue(me.currentValue);
                        me.$emit('input', me.currentValue);
                        me.$emit('value', me.currentValue);
                    }, 10);
                    return;
                }
                if (me.forceInput) {
                    let r = me.validateValue(this.currentValue);
                    if (r) {
                        me.oldValue = me.currentValue;
                    } else {
                        setTimeout(function () {
                            me.setCurrentValue(me.oldValue);
                            me.$emit('input', me.currentValue);
                            me.$emit('value', me.currentValue);
                        }, 10);
                    }
                }
                me.$emit('input', me.currentValue);
                me.$emit('value', me.currentValue);
            },

            setCurrentValue(val) {
                this.currentValue = val;
            },

            setMessage(val) {
                this.message = val;
            },

            setRuleMessage(val) {
                if (!this.errorMessage) {
                    this.setMessage(val);
                } else {
                    this.setMessage(this.errorMessage);
                }
            },

            handleClick(evt) {
                this.$emit('click', evt);
            },

            valid() {
                const me = this;
                const force  = me.forceInput;
                me.forceInput = false;
                const r = me.validateValue(me.currentValue);
                me.forceInput = force;
                return r;
            },

            getStyle(){
                if(this.type == 'textarea'){
                    return {
                        height:auto,
                        "line-height":auto
                    };
                }
            }
        },

        props: {
            placeholder: {
                type: String,
                default: ''
            },
            value: {
                type: [String, Number],
            },
            maxlength: Number,
            minlength: Number,
            type: {
                type: String,
                default: 'text'
            },
            readOnly: {
                type: Boolean,
                default: false
            },
            rows: Number,
            size: {
                type: String,
                default: 'small'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            validate: {
                type: Function,
            },
            errorMessage: {
                type: String,
                default: ''
            },
            required: {
                type: Boolean,
                default: false
            },
            clearable: {
                type: Boolean,
                default: false
            },
            rule: {
                type: String,
                default: ''
            },
            ruleReg: {
                type: String,
                default: ''
            },
            force: {
                type: Boolean,
                default: false
            },
        },
    }
</script>
